<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>局部过滤器</title>
</head>
<body>

<div id="app">
  <div>
    <label>
      <input type="text" v-model="msg">
    </label>
  </div>
  <div>{{msg | upper}}</div>
  <div>{{msg | upper | lower}}</div>

  <div :abc="msg | upper">F12查看属性</div>
</div>

<script src="../lib/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello'
    },
    filters: {
      upper(value) {
        return value.charAt(0).toUpperCase() + value.slice(1)
      },
      lower(val) {
        return val.charAt(0).toLowerCase() + val.slice(1)
      }
    }
  })
</script>

</body>
</html>